<template>
  <div class="right-container">
    <!-- 阴阳性 -->
    <div class="yay-box" v-if="isShowYay">
      <span :class="yay ? 'yay-active' : ''" @click="() => { disabled ? null : handleRadioClick(true) }">阴性</span>
      <span
        :class="!yay && yay !== undefined ? 'yay-active' : ''"
        @click="() => { disabled ? null : handleRadioClick() }"
        >阳性</span
      >
    </div>
    <!-- 提交废片 -->
    <div class="btn-reject" v-if="PrData.discardList.length !== 0 && !disabled ">
      <div class="reject-box" @click="handleReject">
        <i class="iconfont icon-feipian"></i>
        <div>标记废片</div>
      </div>
    </div>
    <!-- 提交废片弹窗 -->
    <Dialog
      :visible="data.markScrapVisible"
      :title="'标记废片'"
      :width="502"
      :maskClosable="false"
      :isForm="true"
      :modalClass="'mark-scrap-dialog'"
      :okText="'提交'"
      @update:visible="handleMarkScrapVisible"
    >
      <template v-slot>
        <div class="radio-container">
          <div class="radio-title">请选择该切片标为废片的原因</div>
          <div class="radio-group">
            <a-radio-group v-model="data.scrapValue">
              <a-radio
                class="radio-group-item"
                v-for="item in PrData.discardList"
                :key="item.value"
                :value="item.value"
                >{{ item.name }}</a-radio
              >
            </a-radio-group>
          </div>
          <div class="err-tips" v-if="data.errStauts">请选择原因！</div>
          <div class="other-container">
            <a-textarea
              v-if="data.scrapValue === '99'"
              v-model="data.discardRemark"
              :auto-size="{ minRows: 2, maxRows: 2 }"
              :max-length="200"
              placeholder="请输入其他废片原因（必填）"
            ></a-textarea>
          </div>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script lang="ts" setup name="ToolBarRight">
import { reactive, inject } from "vue";
import * as Store from "@/store";
import Dialog from "@/components/dialog/index.vue";
import type { CallBackData } from "@/components/dialog/type.d";
import { Message } from '@arco-design/web-vue'
const PrData = Store.useProcessData();
interface CallBack extends CallBackData {
  markScrapVisible: boolean;
  scrapValue: string;
  discardRemark: string;
}
const props = defineProps({
  isShowYay: {
    type: Boolean,
    default: false,
  },
  yay: {
    type: Boolean,
    default: (undefined as unknown) as boolean,
  },
  disabled: {
    type: Boolean,
    default: false
  }
});
const data = reactive({
  markScrapVisible: false,
  scrapValue: "",
  discardRemark: "",
  errStauts: false
});
const provideState = inject("provideState", { getToolBarItem: new Function() });
const handleRadioClick = (value: boolean = false) => {
  provideState.getToolBarItem(() => {
    return {
      value,
      type: "yay",
    };
  });
};
const handleReject = () => {
  data.markScrapVisible = true;
};
const handleMarkScrapVisible = (props: CallBack) => {
  if (props.status === "save") {
    props.done(true);
    if (data.scrapValue !== '') {
      if(data.scrapValue === '99' && data.discardRemark == ''){
        Message.error({
          content: '请输入其他废片原因',
          closable: true,
          duration: 3000,
        })
        return
      }
      data.errStauts = false;
      data.markScrapVisible = props.flag;
      provideState.getToolBarItem(() => {
        return {
          form: {
            scrapValue: data.scrapValue,
            discardRemark: data.discardRemark,
          },
          type: "reject",
        };
      });
    } else {
      data.errStauts = true;
    }
  } else {
    data.scrapValue = "";
    data.discardRemark = "";
    data.errStauts = false;
    data.markScrapVisible = props.flag;
  }
};
</script>
<style lang="less" scoped>
.right-container {
  display: flex;
  align-items: center;
  .yay-box {
    width: 80px;
    border: 1px solid #8ea7b2;
    border-radius: 2px;
    color: #cedee0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    user-select: none;
    cursor: pointer;
    span {
      display: inline-block;
      width: 40px;
      height: 27px;
      margin: 0 auto;
      line-height: 27px;
      text-align: center;
      font-weight: 400;
      font-size: 12px;
    }
  }
  .yay-active {
    color: #13fffb;
    background: #074452;
    box-shadow: inset 0px 0px 4px rgba(19, 255, 251, 0.15);
  }
  .btn-reject {
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    text-align: center;
    user-select: none;
    cursor: pointer;
    .reject-box > i {
      font-weight: 400;
      font-size: 24px;
      line-height: 16px;
      color: #faad14;
    }
    .reject-box > div {
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      color: #ccc;
    }
  }
}
</style>
<style lang="less">
.mark-scrap-dialog {
  background-color: #272727;
  .arco-modal-header {
    height: 64px;
    background-color: #393a3c;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    border: 0;
    .arco-modal-title,
    .arco-modal-close-btn {
      font-weight: 700;
      font-size: 18px;
      color: #fff;
    }
    .arco-icon-hover:hover::before {
      background-color: #616367;
    }
  }
  .arco-modal-body {
    padding: 20px 32px;
    .radio-title {
      font-weight: 400;
      font-size: 16px;
      color: #fff;
      margin-bottom: 18px;
      text-align: left;
    }
    .radio-group {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .arco-radio-group {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        .radio-group-item {
          margin-bottom: 12px;
          .arco-radio-label {
            white-space: nowrap;
          }
        }
      }
      .arco-radio-icon {
        width: 12px;
        height: 12px;
        line-height: 12px;
        border: 1px solid rgba(255, 255, 255, 0.7);
      }
      .arco-radio-icon::after {
        background-color: transparent;
      }
      .arco-radio:hover .arco-radio-icon {
        border-color: #67c9d5;
      }
      .arco-radio:hover .arco-radio-icon-hover::before {
        background-color: transparent;
      }
      .arco-radio-checked .arco-radio-icon {
        border: 1px solid #67c9d5;
        background-color: transparent;
      }
      .arco-radio-checked .arco-radio-icon::after {
        background-color: #67c9d5;
      }
      &-item {
        font-weight: 400;
        font-size: 14px;
        color: #ccc;
        .arco-radio-label {
          color: #ccc;
        }
      }
    }
    .err-tips{
      font-size: 12px;
      color: #F40;
      text-align: left;
      margin-bottom: 8px;
    }
    .other-container {
      margin: 4px 0 20px;
      width: 100%;
      height: 32px;
      .arco-textarea-wrapper {
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, 0.7);
        color: #fff;
      }
    }
  }
  .arco-modal-footer {
    padding: 0 20px 32px;
  }
}
</style>
